<template>
  <div class="head">
      <!-- logo -->
      <img :src="logoSrc" alt="" class='logo'>
      <div class="name"><span>丰业嘉品</span>线上商城</div>
      <div class="title">{{ text }}</div>
    </div>
</template>

<script>
export default {
  name: 'logoHead',
  props: {
    text: {
      type: String,
      default: 'title'
    }
  },
  data () {
    return {
      logoSrc: require('../assets/logo.png')
    }
  }
}
</script>

<style lang="less">
.head{
    width:100%;
    padding:20px;
    display:flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    .logo{
      width:100px;
      height: 100px;
      border-radius: 50%;
      margin-bottom: 20px;
    }
    .name{
      font-weight: bold;
      letter-spacing: 2px;
      span{
        color:#5ba0f4;
        font-size: 18px;
      }
    }
    .title{
      font-size: 15px;
      font-weight: bolder;
      margin-top:10px;
    }
  }
</style>
